<template>
  <div class="withdrawals-record">
    <div class="daili-nav">
      <div class="aGroup">
        <scroll class="wrapper wrapper-srcoll"
                  ref="wrapper"
                  :startX="0"
                  :click="true"
                  :scrollX="true"
                  :scrollY="false"
                  :eventPassthrough="'vertical'">
          <!-- 链动 start -->
          <div class="content">
            <van-button class="span" data-id="-1" @click="selectItem(-1)" :color="type == -1 ? '#F30C23':'#999999'"
              plain hairline round type="primary">
              <i>全部</i>
            </van-button>
            <van-button class="span" data-id="0" @click="selectItem(0)" :color="type == 0 ? '#F30C23':'#999999'" plain
              hairline round type="primary">
              <i>审核中</i>
            </van-button>
            <van-button class="span" data-id="1" @click="selectItem(1)" :color="type == 1 ? '#F30C23':'#999999'" plain
              hairline round type="primary">
              <i>待发放</i>
            </van-button>
            <van-button class="span" data-id="2" @click="selectItem(2)" :color="type == 2 ? '#F30C23':'#999999'" plain
              hairline round type="primary">
              <i>已完成</i>
            </van-button>
            <van-button class="span" data-id="3" @click="selectItem(3)" :color="type == 3 ? '#F30C23':'#999999'" plain
              hairline round type="primary">
              <i>驳回</i>
            </van-button>
            <van-button class="span" data-id="4" @click="selectItem(4)" :color="type == 4 ? '#F30C23':'#999999'" plain
              hairline round type="primary">
              <i>已取消</i>
            </van-button>
            <van-button class="span" data-id="5" @click="selectItem(5)" :color="type == 5 ? '#F30C23' : '#999999'" plain
              hairline round type="primary">
              <i>待确认</i>
            </van-button>
          </div>
        </scroll>
      </div>
    </div>
    <div class="cashbox">
      <div class="cash-detail">
        <div
          v-show="!is_wxpay_profit_sharing"
          class="IntegralDetail detailItem"
          id="J-listuser"
          style="border-radius: 10px;"
        >
          <!--提现明细-->
          <div class="listuser-con">
            <van-list
              v-show="items.length"
              v-model="loading"
              :immediate-check="true"
              :finished="finished"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text=""
              @load="onLoad"
            >
              <ul>
                <li class="supplier_widthdraw_detail" v-for="(item, index) in items" :key="index">
                  <template v-if="!item.is_wechat_tx_2025">
                  <div class="flx-title">
                    <p class="title">{{item.apply_time1}}</p>
                    <p class="status">
                      <span v-if="item.have_pay==0" class="yellow">审核中</span>
                      <span v-if="item.have_pay==1" class="yellow">待发放</span>
                      <span v-if="item.have_pay==2" class="green">已发放</span>
                      <span v-if="item.have_pay==3" class="red">驳回</span>
                      <span v-if="item.have_pay==4" class="red">已取消</span>
                      <span v-if="item.have_pay==5" class="red">待确认</span>
                    </p>
                  </div>
                  
                  <div class="flx">
                    <p class="w50">
                      <span>申请金额：</span>
                      {{item.money}}
                    </p>
                    <p class="w50">
                      <span>收款人：</span>
                      {{item.payee}}
                    </p>
                    <p class="w50" v-if="item.money_type==1 && item.is_qz ==0">
                      <span>实发佣金：</span>
                      {{item.real_pay_money}}
                    </p>
                    <p class="w50" v-if="item.money_type==1 && item.is_qz ==0">
                      <span>实发余额：</span>
                      {{item.commission_to_balance}}
                    </p>
                    <p class="w50" v-else>
                      <span>实发金额：</span>
                      {{item.pay_money}}
                    </p>
                    <p class="w50">
                      <span>手续费：</span>
                      {{item.service_charge}}
                    </p>
                  </div>
                  <div class="flx">
                    <p class="">
                      <span>银行流水号：</span>
                      {{item.running_number}}
                    </p>
                  </div>
                  <div class="flx" v-if="item.adapay_remark">
                    <p class="">
                      <span>备注：</span>
                      {{item.adapay_remark}}
                    </p>
                  </div>
                  <div class="flx" v-if="item.have_pay==3 && item.reason">
                    <p class="">
                      <span>驳回理由：</span>
                      {{item.reason}}
                    </p>
                  </div>
                  
                  <div
                    class="record"
                    v-if="item.is_qz > 0 && item.is_qz != 8 && (item.have_pay == 4 || item.have_pay == 2|| item.have_pay == 5)"
                  >
                    <span @click="selectEnter(item.log_id)" class="record-content red-border-btn">去确认</span>
                  </div>
                  </template>
                  <template v-else>
                    <div class="flx-title">
                      <p class="title">{{ item.apply_time1 }}</p>
                      <p class="status">
                        <span v-if="item.have_pay == 0" class="yellow">审核中</span>
                        <span v-if="item.have_pay == 1" class="yellow">待领取</span>
                        <span v-if="item.have_pay == 2" class="green">已发放</span>
                        <span v-if="item.have_pay == 3" class="red">驳回</span>
                      </p>
                    </div>
                    <div class="flx">
                      <p class="w50">
                        <span>申请金额：</span>
                        {{ item.money }}({{ item.transfer_info.total_num }}笔)
                      </p>
                      <p class="w50">
                        <span>已到账：</span>
                        {{ item.transfer_info.success_amount }}<template v-if="Number(item.transfer_info.success_num) > 0">({{ item.transfer_info.success_num}}笔)</template>
                      </p>
                      <p class="w50">
                        <span>手续费({{ item.transfer_info.fee_percent }}%)：</span>
                        {{ item.transfer_info.total_fee }}
                      </p>
                      <p class="w50">
                        <span>已扣手续费：</span>
                        {{ item.transfer_info.success_fee }}
                      </p>
                      <p class="w50">
                        <span>预计领取：</span>
                        {{ item.transfer_info.pre_amount }}
                      </p>
                      <p class="w50">
                        <span>待领取：</span>
                        {{ item.transfer_info.wait_amount }}<template v-if="Number(item.transfer_info.wait_num) > 0">({{ item.transfer_info.wait_num }}笔)</template>
                      </p>
                      <p class="w50">
                        <span>收款人：</span>
                        {{ item.payee }}
                      </p>
                      <!-- <p style="width: 100%;">
                        <span>失败金额：</span>
                        {{ item.real_pay_money }}(1笔)(已返还至佣金，含手续费)
                      </p> -->
                    </div>
                    <div class="record" v-if="item.have_pay == 1 || item.have_pay == 2">
                      <span @click="jumpName('paymentRecord', { id: item.log_id})"
                        class="record-content red-border-btn">{{ item.have_pay == 1 ? `点我收款(${item.transfer_info.wait_num}笔)` : '查看详情'}}</span>
                    </div>
                  </template>
                </li>
              </ul>
            </van-list>
            <div v-show="!items.length">
              <no-data :noData=noData></no-data>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  getWithdrawalsRecord,
  WithdrawalsRecordEnter
} from '@/api/user/fxs/fxsApi'
import noData from '@/components/noData/index'
import { List } from 'vant'
import { openPage } from '@/utils/utils'
import Scroll from '@/components/scroll/index'
Vue.use(List)
export default Vue.extend({
  components: {
    noData,
    Scroll
  },
  data() {
    return {
      noData: {
        width: '184px',
        marginTop: '100px',
        txtMarginTop: '-30px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_tx_log.png',
        text: '当前没有提现记录'
      },
      error: false,
      loading: false,
      finished: false,
      is_wxpay_profit_sharing: 1,
      is_qz: 1,
      items: [],
      p: 1,
      type: -1
    }
  },
  created() {
    this.$loadingWrap.show()
    this.onLoad()
  },
  watch: {
    $route(to, from) {
      if (from.name == 'paymentRecord') {
        this.p = 1
        this.items = []
        this.onLoad()
      }
    }
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    onLoad() {
      const data = { page: this.p, have_pay: this.type == '-1' ? undefined : this.type }
      getWithdrawalsRecord(data)
        .then(res => {
          this.loading = false
          this.$loadingWrap.close()
          if (res.status == 1) {
            // console.log(res)
            this.is_wxpay_profit_sharing = res.data.is_wxpay_profit_sharing
            

            if (res.data.data && res.data.data.length > 0) {
              this.items.push(...res.data.data)
              this.p++
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    jumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    // 切换类型
    selectItem(type) {
      if (this.type == type) return
      this.type = type
      this.p = 1
      this.items = []
      this.finished = false
      this.loading = true
      this.$loadingWrap.show()
      this.onLoad()
    },
    selectEnter(id) {
      WithdrawalsRecordEnter({ shopOrder: id, is_post: 1 }).then(res => {
        if (res.data.url) {
          openPage(res.data.url)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/user/Group/index.scss";
.daili-nav {
  // border-top: 1px solid #ededed;
  padding: 20px 30px 0 30px;
  .aGroup {
    white-space: nowrap;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 0;
    }
    .span {
      background: transparent;
    }
    .wrapper-srcoll{
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    scroll {
      -webkit-overflow-scrolling: touch;
    }
  }
}
.cashbox {
  .cash-detail {
    .IntegralDetail {
      .supplier_widthdraw_detail {
        width: 700px;
        position: relative;
        // padding: 20px;
        font-size: 28px;
        margin: 25px auto;
        border-radius: 20px;
        background: #fff;
        
        .record {
          padding: 10px 0 20px 30px;
          .record-content {
            display: inline-block;
            padding: 0 20px;
            font-size: 24px;
            line-height: 50px;
            border-radius: 25px;
          }
        }
        .flx-title{
          line-height: 90px;
          border-bottom: 1px solid #EDEDED;
          padding: 0 30px;
          overflow: hidden;
          p{
            &.title{
              float: left;
              font-size: 28px; 
              font-weight: bold;
            }
            &.status{
              float: right;
              .gray {
                color: #999;
              }
              .yellow {
                color: #FF8C01;
              }
              .green {
                color: #21e900;
              }
              .red {
                color: #F30C23;
              }
            }
          }
        }
        .flx {
          display: flex;
          justify-content: flex-start;
          flex-wrap:wrap;
          padding: 0 30px;
          p {
          line-height: 60px;
          width: 100%;
          word-wrap: break-word;
          word-break: break-all;
          color: #666;
          font-size: 26px;
          &.w50{ 
            width: 50%;
          }
          span {
            // margin-right: 16px;
            color: #333;
          }
        }
        }
      }
      .staticLoading {
        display: block;
        padding: 4px 0 10px;
        margin: 0 auto;
        color: #333;
        text-align: center;
        p {
          color: #666;
          padding: 10px;
          text-align: left;
          span {
            display: inline-block;
            color: #989898;
            padding: 10px 16px;
            font-weight: 500;
          }
        }
      }
    }
    .no-data {
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
}
</style>
